<template>
  <div class="userManagement">
		<el-table :data="tableData" height="calc(100vh - 175px)" style="width: 100%">
			<el-table-column label="账号" prop="username"></el-table-column>
			<el-table-column label="姓名" prop="first_name"> </el-table-column>
			<el-table-column label="邮箱" prop="email"> </el-table-column>
			<el-table-column label="权限" prop="is_superuser">
				<template slot-scope="scope">
					<span v-for="item in jurisdictions" :key="item.value" :value="item.value">
						{{ scope.row.is_superuser == item.value ? item.label : '' }}
					</span>
					</template>
			</el-table-column>
			<el-table-column label="上次登录" prop="date_joined"> </el-table-column>
			<el-table-column align="right">
				<template slot="header" slot-scope="scope">
					<el-input v-model="searchData" size="mini" placeholder="输入关键字搜索" @change='search(scope)' class="input-with-select">
						<el-select v-model="searchType" slot="prepend"  style="width:80px;">
							<el-option label="账 号" value="username"></el-option>
							<el-option label="姓 名" value="first_name"></el-option>
						</el-select>  
					</el-input>
				</template>
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-size="10"
			layout="total, prev, pager, next"
			:total="count">
		</el-pagination>

		<el-drawer
			title="修改用户信息"
			:before-close="handleClose"
			:visible.sync="editDrawer"
			direction="btt"
			ref="drawer">
			<el-form class="editDrawer" :inline="true" :model="editForm" >
				<el-form-item label="账号">
					<el-input v-model="editForm.newUsername" ></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="editForm.newFirst_name" ></el-input>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="editForm.newEmail" ></el-input>
				</el-form-item>
				<el-form-item label="权限">
					<el-select v-model="editForm.newIs_superuser" >
						<el-option 
							v-for="item in jurisdictions" :key="item.value" 
							:label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div class="editDrawer">
				<el-button @click="editDrawer = false">取 消</el-button>
				<el-button type="primary" @click="$refs.drawer.closeDrawer()">确 定</el-button>
			</div>
		</el-drawer>
    <Footer />
  </div>
</template>

<script>
import Footer from '../../components/footer.vue'
export default {
  data() {
    return {
			userData: [],
			tableData: [],
			jurisdictions:[{
					label: '一般用户',
					value: 0,
				},{
					label: '专家',
					value: 1,
				},{
					label: '管理员',
					value: 2,
				},
			],

			searchData: '',
			searchType: 'username',

			editDrawer: false,
			editForm: {
				oldUsername: '',
				oldFirst_name: '',
				oldEmail: '',

				newUsername: '',
				newFirst_name: '',
				newEmail: '',
				newIs_superuser: 0,
			},

			offset: 0,
			limit: 10,
			count: 0,
			currentPage: 1,
		};
  },
  components:{
    Footer
  },
	created (){
		this.getUserList()
	},
	methods:{
		getUserList(condition){
			this.$axios.get('http://127.0.0.1:8000/api/getUserList?body=' + JSON.stringify(condition))
        .then((res) => {
					// console.log(res);
					this.userData = res.data.userInf
					this.count = this.userData.length
					this.tableData = this.userData.slice(0, 10)
				})
		},
		// 搜索用户
		search(){
			// console.log([this.searchData]);
			this.getUserList({
				searchType: this.searchType,
				searchData: this.searchData,
			})
		},
		// 修改用户信息
		handleEdit(index, row){
			this.editForm = {
				oldUsername: row.username,
				oldFirst_name: row.first_name,
				oldEmail: row.email,

				newUsername: row.username,
				newFirst_name: row.first_name,
				newEmail: row.email,
				newIs_superuser: row.is_superuser,
			}
			this.editDrawer = true
		},
		handleClose() {
			this.$confirm('此操作将修改该用户信息, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios.get('http://127.0.0.1:8000/api/handleEdit?body=' + JSON.stringify(this.editForm))
					.then((res) => {
						// console.log(res);
						this.editUser = {
							username: '',
							first_name: '',
							email: '',
						}
						this.$message.success('修改成功!')
						this.editDrawer = false
						this.getUserList()
					})
			}).catch(() => {
				this.$message.info('已取消操作')       
			});
    },
		// 删除用户信息
		handleDelete(index, row) {
			console.log(index, row);
			 this.$confirm('此操作将删除该用户信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
					this.$axios.get('http://127.0.0.1:8000/api/handleDelete?body=' + JSON.stringify(row))
						.then((res) => {
							// console.log(res);
							this.$message.success('删除成功!')
							this.getUserList()
						})
        }).catch(() => {
          this.$message.info('已取消删除')       
        });
		},
		// 分页
		handleCurrentChange(val) {
			this.currentPage = val;
			this.offset = (val - 1)*this.limit;
			this.tableData = this.userData.slice(this.offset, this.offset + 10)
		},
	}
}
</script>

<style>
.userManagement{
    width: 100%;
    height: 100%;
}
.el-aside, .el-main {
  height: calc(100vh - 60px);
}
.editDrawer{
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>